<template>
    <div id="CheckBed">
        <div id="addAndSearch">
            <div id="choose">
                <template>
                    <el-select v-model="value_building" placeholder="请选择">
                        <el-option
                                v-for="item in options_building"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                    <el-select v-model="value_floor" placeholder="请选择">
                        <el-option
                                v-for="item in options_floor"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                        <el-button type="primary" @click="getButton()">确定</el-button>
                </template>
            </div>
        </div>
        <div id="formDiv">
            <el-table
                    :data="RoomList"
                    border
                    style="width: 1235px"
            >
                <el-table-column fixed prop="roomId" label="房间号" width="100">
                </el-table-column>
                <el-table-column prop="bedNumber" label="床号" width="100">
                </el-table-column>
                <el-table-column prop="name" label="姓名" width="120">
                </el-table-column>
                <el-table-column prop="sex" label="性别" width="120">
                </el-table-column>
                <el-table-column prop="number" label="档案号" width="250">
                </el-table-column>
                <el-table-column prop="start_time" label="床位起始日期" width="150">
                </el-table-column>
                <el-table-column prop="remarks" label="备注" width="150">
            </el-table-column>
                <el-table-column label="操作" width="144">
                    <template slot-scope="scope">
                        <el-button
                                type="text"
                                @click="
                centerDialogVisible = true,
                editButton(scope.row)
              "
                                size="small"
                        >查看信息</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div id="editDialog">
            <el-dialog
                    title="查看用户资料"
                    :visible.sync="centerDialogVisible"
                    width="50%"
                    center
            >
                <div>
                    <el-descriptions class="margin-top" title="客户信息" :column="3" :size="size" border >
                        <el-descriptions-item label="姓名">{{currentRoom.name}}</el-descriptions-item>
                        <el-descriptions-item label="性别">{{currentRoom.sex}}</el-descriptions-item>
                        <el-descriptions-item label="编号">{{currentRoom.id}}</el-descriptions-item>
                        <el-descriptions-item label="年龄">{{currentRoom.age}}</el-descriptions-item>
                        <el-descriptions-item label="身高">{{currentRoom.height}}</el-descriptions-item>
                        <el-descriptions-item label="体重">{{currentRoom.weight}}</el-descriptions-item>
                        <el-descriptions-item label="血型">{{currentRoom.bloodType}}</el-descriptions-item>
                        <el-descriptions-item label="婚姻状况">{{currentRoom.maritalStatus}}</el-descriptions-item>
                        <el-descriptions-item label="护理等级">{{currentRoom.nursingLevel}}</el-descriptions-item>
                        <el-descriptions-item label="身份证号">{{currentRoom.idNumber}}</el-descriptions-item>
                        <el-descriptions-item label="档案号">{{currentRoom.archivesid}}</el-descriptions-item>
                        <el-descriptions-item label="联系电话">{{currentRoom.phoneNumber}}</el-descriptions-item>
                    </el-descriptions>
                </div>
                <span slot="footer" class="dialog-footer">
          <el-button @click="centerDialogVisible = false,resetForm()">取 消</el-button>
        </span>
            </el-dialog>
        </div>
        <el-row style="float: right;margin: 0">
            <label>当前为第{{this.page.nowpage}}页，共计{{this.page.totalpage}}页</label>
            <el-form :inline="true">
                <el-form-item>
                    <el-button type="primary" icon="el-icon-arrow-left" @click="decrease_page()">上一页</el-button>
                    <el-button type="primary" @click="increase_page()">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
                    <el-input type="primary" placeholder="请输入页码" style="max-width: 120px"
                              v-model="page.page_input"
                    ></el-input>
                    <el-button type="primary" @click="change_page()">Go!</el-button>
                </el-form-item>
            </el-form>
        </el-row>
    </div>
</template>

<script>
    import qs from 'qs'
    const axios = require("axios");
    export default {
        mounted() {
            this.getBed("1");
        },
        methods: {
            getButton(){
              this.page.nowpage=1;
              this.getBed("1");
            },
            increase_page() {
                if(this.page.nowpage<this.page.totalpage) {
                    this.$data.page.nowpage++;
                    this.getBed(this.page.nowpage);
                }
            },
            decrease_page() {
                if (this.$data.page.nowpage > 1) {
                    this.$data.page.nowpage--;
                }
                this.getBed(this.page.nowpage)
            },
            change_page() {
                let num = parseInt(this.$data.page_input);
                if (isNaN(num)) {
                    alert("请输入正确的数字！");
                    this.$data.page.page_input = '';
                } else if (num <= 0) {
                    alert("请输入正整数！");
                    this.$data.page.page_input = '';
                } else {
                    this.$data.page.current_page = num;
                    this.getBed(this.page.page_input);
                }
            },
            handleClose(done) {
                this.$confirm("确认关闭？")
                    .then((_) => {
                        done();
                    })
                    .catch((_) => {});
            },
            handleCurrentChange(val) {
                /*console.log(val);*/
                this.getBed(val);
                this.page.nowpage=val;
            },
            getBed(page) {
                axios({
                    method:'post',
                    url:'/api/checkbed_page/getBed',
                    data:qs.stringify({'floor':this.$data.value_floor,'building':this.$data.value_building,'page':page}),
                }).then(
                    (res) => {
                        console.log(res);
                        this.RoomList = res.data.data.bed_list;
                        this.page.totalpage=res.data.data.total_page;
                    },
                    (res) => {}
                );
            },
            editButton(row){
                console.log(row.bedNumber);
                axios({
                    method:'post',
                    url:'/api/checkbed_page/getDetail',
                    data:qs.stringify({'bedId':row.bedNumber}),
                }).then(
                    (res) => {
                        console.log(res);
                        this.currentRoom = res.data.data
                    },
                    (res) => {}
                );

            },
            resetForm(){
                this.currentRoom='';
            }
        },
        data() {
            return {
                RoomList: [],
                currentRoom:{},
                BedList:[
                    {

                    }
                ],
                approveid:"",
                page:{
                    page: 0,
                    nowpage: 1,
                    totalPage:'',
                },
                addDialogVisible: false, //add彈出框屬性
                centerDialogVisible: false, //
                isVisible:false,
                formInline: {
                    search: "",
                },
                options_building:[
                    {
                        value:'一号楼',
                        label:'一号楼',
                    },
                    {
                        value:'二号楼',
                        label:'二号楼',
                    },
                ],
                options_floor:[
                    {
                        value:'一楼',
                        label:'一楼',
                    },
                    {
                        value:'二楼',
                        label:'二楼',
                    },
                    {
                        value:'三楼',
                        label:'三楼',
                    },
                ],
                username:"",
                value_building:'二号楼',
                value_floor:'一楼',
                form: {
                   Roomid:"",
                    BedNumber:"",
                    number:"",
                    name:"",
                    sex:"",
                    start_time:"",
                    end_time:"",
                    remarks:"",
                },
            };
        },
    };
</script>

<style>

    #CheckBed {
        width: 100%;
        height: 100%;
    }
    #CheckBed #formDiv {
        margin-left: 50px;
        margin-right: 50px;
    }
    #CheckBed #addAndSearch {
        padding: 20px;
        width: 100%;
        height: 50px;
    }
    #CheckBed #addAndSearch .el-input {
        width: 200px;
    }
    #CheckBed #addAndSearch #choose {
        float: left;
        margin-right: 60px;
    }
    #CheckBed #addAndSearch #choose .el-input {
        width: 120px;
    }
    #CheckBed #page {
        bottom: 0;
        left:50%;
        position: absolute;
    }

    /*#CheckBed #formDiv .el-table th,#CheckBed #formDiv .el-table tr,#CheckBed #formDiv .el-table__empty-block,#CheckBed .el-table__row td*/
    /*{*/
    /*    border: 1px solid #CBCBCB;*/
    /*    background-color: #EEEEEE;*/
    /*}*/
</style>

